<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jq-6</title>
		<script src="../js/jquery-3.6.3.min.js"></script>
		<script>
			$(function(){
				//$("ul li").mouseover(function(){}).mouseout();
				$("ul").attr("align","center").css({"border":"4px double green","list-style":"none"}).css("color","red");//链式操作
				//加事件：bind多个事件
				$("ul li").bind({"mouseover":function(){
				   //this
					$(this).css("font-size","60px");
				},
				"mouseout":function(){
					$(this).css("font-size","16px");
				}});
				$("#b1").click(function(){
					let n=window.prompt("新水果：");
					$("ul").append("<li>"+n+"</li>");
				});
			});
		</script>
	</head>
	<body>
		<ul>
			<li>桃子</li>
			<li>狮子</li>
			<li>柿子</li>
			<li id="t4">花生</li>
			<li>xihongshi</li>
			<li>putao</li>
			<li>boluo</li>
		</ul>
		<div>
			<button type="button" id="b1">添加一个元素</button>
		</div>
	</body>
</html>